<!--
 * @Author: your name
 * @Date: 2021-08-13 16:05:33
 * @LastEditTime: 2021-08-17 13:12:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \2-Html&CSSc:\Users\User\Desktop\简书项目开发\jianhsu\guanzhu.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关注</title>
    <link rel="stylesheet" href="./css/IT.css">
    <style>
        .guanzhu {
            width: 960px;
            height: 3146px;
            background-color: white;
            padding-left: 15px;
            padding-right: 15px;
            box-sizing: border-box;
            margin: auto;
        }

        .row {
            padding-top: 30px;
        }

        .aside {
            position: fixed;
            top: 0;
            bottom: 0;
            margin: 86px 0 0;
            padding: 0 0 30px;
            width: 280px;
            overflow: auto;
            border-right: 1px solid #f0f0f0;
        }

        .change {
            margin-left: 15px;
            font-size: 15px;
        }

        .active {
            margin-top: 7px;
            list-style: none;
            border-top: 1px solid #f0f0f0;
        }

        .right1 {
            margin-left: 33%;
            margin-top: 80px;
            width: 66%;
            height: 3200px;
            float: left;
            box-sizing: border-box;
            padding-right: 15px;
            margin-right: 0px;
        }

        .menu {
            margin-top: -120px;
            margin-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0;
            list-style: none;
            width: 613px;
            height: 45px;
            background-color: white;
            overflow: hidden;
            padding-right: 15px;
        }

        .one {
            border-bottom: 2px solid #646464;
        }

        ul>li>a {
            color: #646464;
            padding: 13px 20px;
            font-size: 15px;
            font-weight: 700;
            color: #969696;
            line-height: 25px;
            float: left;

        }

        .tuijian {
            position: relative;
            /* display: inline-block; */
            float: left;

            padding: 8px 0;
            margin-bottom: -1px;
            line-height: 25px;
            padding: 13px 20px;
        }

        .tian-jia {
            width: 253px;
            height: 40px;
            padding: 10px 13px;
            background-color: #f0f0f0;
            border-radius: 4px;
            /* vertical-align: middle; */
        }

        .name {
            vertical-align: middle;
            font-size: 14px;
            padding-bottom: 30px;
        }

        .tian-jia .img {
            width: 40px;
            height: 40px;
            margin-right: 4px;
            display: inline-block;
        }

        .img img {
            width: 100%;
            height: 100%;
        }

        .follow {
            list-style: none;
            width: 615px;
            height: 3150px;
            margin-top: 0px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }

        .follow li {
            margin: 0 0 20px;
            padding: 0 0 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .icon {
            float: right;
            padding: 8px 0;
            margin-top: 5px;
            width: 100px;
            border-color: #42c02e;
            border-radius: 40px;
            color: #fff;
            background-color: #42c02e;
            text-align: center;
            border: 1px solid transparent;

        }

        .ic-follow {
            font-family: iconfont !important;
            font-size: inherit;
            font-style: normal;
            font-weight: 400 !important;
            line-height: normal;
        }

        .tag {
            margin-bottom: 13px;
            font-size: 12px;
            color: #ec6e56;
            margin-left: -49px;
        }

        .tag i {
            margin-right: 5px;
            font-size: 16px;
            font-family: iconfont !important;
            /* font-size: inherit; */
            font-style: normal;
            font-weight: 400 !important;
            box-sizing: border-box;
        }

        .tag i img {
            width: 16px;
            height: 17px;

        }

        .tag a {
            float: left;
            width: 52px;
            height: 52px;
            display: block;
            margin-top: 20px;
        }

        .tag a img {
            width: 52px;
            height: 52px;
            margin-left: 51px;
            margin-top: 15px;
        }

        .read-more {
            color: #fff;
            display: inline-block;
            width: 595px;
            /* height: 20px; */
            margin: 30px auto 60px;
            padding: 10px 15px;
            text-align: center;
            font-size: 15px;
            border-radius: 20px;
            background-color: #a5a5a5;
            box-sizing: border-box;

        }

        .read-more:hover {
            /* color: #fff; */
            background-color: #9b9b9b;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <nav class="nav">
        <div class="nav-div">
            <a href="#" class="logo"><img src="images/bg/main4.png" alt=""></a>
            <a href="#" class="text btn"><img src="images/icon/yumanbi.png" height="19px" width="19px" alt="">
                <i>写文章</i> </a>
            <div class="nav-page">
                <div id="head">
                    <img id="head" src="images/bg/QQ头像.jpg" width="40px"
                        style="border-radius: 20px; margin-top: 8px;  margin-left: 10px;" alt="">
                    <ul class="page-2" id="page-2">
                        <li><a href="#"><img src="images/icon/renyan.png" alt="">我的主页</a></li>
                        <li><a href="#"><img src="images/icon/shoucang.png" alt="">收藏的文章</a></li>
                        <li><a href="#"><img src="images/icon/xiaoxi.png" alt="">喜欢的文章</a></li>
                        <li><a href="#"><img src="images/icon/yigou.png" alt="">已购内容</a></li>
                        <li><a href="#"><img src="images/icon/qianbao.png" alt="">我的钱包</a></li>
                        <li><a href="#"><img src="images/icon/shezhi (3).png" alt="">设置</a></li>
                        <li><a href="#"><img src="images/icon/bangzhu.png" alt="">帮助与反馈</a></li>
                        <li><a href="#"><img src="images/icon/tuichu (2).png" alt="">退出</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav-font">
                Aa
            </div>
            <div class="nav-search">
                <ul class="nav-ul clearfix">
                    <ul class="nav-ul clearfix">
                        <li class="hover"><a href="main.html"> <img src="images/icon/zhinanzhen2.png" alt=""> 发现</a>
                        </li>
                        <li class="hover"><a href="IT.html"> <img src="images/icon/renyan.png" alt=""> IT技术</a> </li>
                        <li class="hover"><a href="guanzhu.html"><img src="images/icon/shu.png" alt=""> 关注</a> </li>
                        <li class="hover hover-0">
                            <a href="massage.html"><img src="images/icon/zhong.png" alt=""> 消息</a>
                            <!-- <div class="hover-0"> -->
                            <ul class="hover-1">
                                <li><a href="#"><img src="images/icon/pinlun.png" alt=""> 评论</a></li>
                                <li><a href="#"><img src="images/icon/xin.png" alt="">简信</a></li>
                                <li><a href="#"><img src="images/icon/shangchuan.png" alt="">投稿请求</a></li>
                                <li><a href="#"><img src="images/icon/xihuan (2).png" alt="">喜欢和赞</a></li>
                                <li><a href="#"><img src="images/icon/guanzhu.png" alt="">关注</a></li>
                                <li><a href="#"><img src="images/icon/zhifu.png" alt="">赞赏和付费</a></li>
                                <li><a href="#"><img src="images/icon/shenglue.png" alt="">其他提醒</a></li>
                            </ul>
                            <!-- </div> -->
                        </li>
                        <li id="li"><input type="text" placeholder="搜索" style="border:none;"></li>
                    </ul>
            </div>
        </div>
    </nav>
    <div class="guanzhu">
        <div class="row">
            <div class="aside">
                <a class="change">全部关注</a>
                <ul class="list">
                    <li class="active">
                        <div class="tian-jia">
                            <div class="img">
                                <img src="./images/icon/添加关注.jpg" alt="">
                            </div>
                            <span class="name">添加关注</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right1">
            <div id="row">
                <!-- 右1 -->
                <ul class="menu">
                    <li class="one">
                        <a href="#">全部推荐</a>
                    </li>
                    <li><a href="#" class="tuijian">推荐作者</a>
                    </li>
                    <li><a href="#">推荐专题</a>
                    </li>
                </ul>
                <!-- 右2 -->
                <ul class="follow">
                    <li>
                        <div style="height: 110px;" id="1">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="2">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="3">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="4">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="5">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="6">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="7">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="8">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="9">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="10">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="11">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="12">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="13">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="14">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="15">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="16">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="17">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="18">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="19">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="20">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div style="height: 110px;" id="21">
                            <a href="#" class="icon">
                                <i class="ic-follow"></i>
                                <span>+关注</span>
                            </a>
                            <div class="tag">
                                <i>
                                    <img src="./images/icon/jiang.png" alt="">
                                </i>
                                <span>简书推荐专题</span>
                                <a href="#">
                                    <img src="./images/bg/摄影.jpg" alt="">
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- 右3-底层阅读更多 -->
                <a href="#" class="read-more">阅读更多</a>
            </div>

        </div>

    </div>
</body>

</html>